<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
			
			request.setAttribute("path", path);
			
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

<script type="text/javascript" src="${path}/js/jquery-1.12.3.js"></script>

	<style type="text/css">
			.window {
				width: 300px;
				background-color: #0000FF;
				position: absolute;
				padding: 2px;
				margin: 5px;
				display: none;
			}
			.content{ 
    height:150px; 
    background-color:#FFF; 
    font-size:14px; 
    overflow:auto; 
    } 
    .title{ 
        padding:2px; 
        color:#0CF; 
        font-size:14px; 
        } 
.title img{ 
        float:right; 
        } 
		</style>

<script type="text/javascript">
		$(document).ready(function(){
		$("#sub").click(function(){
			$.ajax({
				type:"post",
				url:"<%=path%>/WorkController/login.html",
				dataType:"json",
				data:{
					"name":$("#username").val(),
					"passwd":$("#password").val()
					
				},
				success:function(data){
				  /*  $.each(data,function(i,item) {
			         $("#t1").append(
			         "<tr><td>"+item.user_name+"</td>"+
			         "<td>"+item.passwd+"</td></tr>"
			         
			         );
                   }); */
              /*   alert(data); */
                   if(data>0){
                   window.location.href="${path}/WorkController/jeep.html";
                   	$("#username").val("");
				    $("#password").val("");
                   }else{
                       alert("用户名不存在");
                   }
				},
				error:function(data){
					alert("fail");
				}
			});
			
			
		});
	});
	
	
			function init() {
				/*计算高度的*/
				windowHeight = $(window).height();
				windowWidth = $(window).width();
				popHeight = $(".window").height();
				popWidth = $(".window").width();
			}

			function cht() {
				init();
				/* alert("windowHeight:"+windowHeight+"windowWidth:"+windowWidth+"popHeight:"+popHeight+"popWidth:"+popWidth); */
				//计算弹出窗口的左上角Y的偏移量 
				var popY = (windowHeight - popHeight) / 2;
				var popX = (windowWidth - popWidth) / 2;
			$("#d5").css("top", popY).css("left", popX).slideToggle("slow");
			}
			
			function remove(){
				$("#d5").hide();
				$("#username").val("");
				$("#password").val("");
			}
			function login(){
				$("#username").val("");
				$("#password").val("");
			}	
</script>
</head>

<body>
<!-- 
	用户名：
	<input type="text" id="username">
	</br> 密码：
	<input type="text" id="passwd">
	</br>
	<input type="button" value="提交" id="sub" ><br/>
	<table width="200" border="1" id="t1">
			<tr>
				<td>账号</td>
				<td>密码</td>
			</tr>
			
		</table> -->
		<div class="window" id="d5">
		<div class="title" >登陆界面</div>
		<div class="content"><p align="center">用户名：<input type="text" id="username"/></p>
			<p style="margin-left: 58px;">密码：<input type="text" id="password"/></p>
			<div style="margin-left: 95px;">
				
			<input type="button" value="登录" id="sub"/>
			<input type="button" style="margin-left: 30px" onclick="remove()" value="取消"/>
</div>
</div>
		</div>
		<input type="button"  value="显示" onclick="cht()"/><br/>
	
</body>
</html>

